<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9个被低估的CSS特性演示</title>
    <style>
        /* 整体页面样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
            padding: 2rem;
        }
        
        header {
            text-align: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e9ecef;
        }
        
        h1 {
            color: #0066cc;
            margin-bottom: 0.5rem;
        }
        
        .intro {
            max-width: 800px;
            margin: 0 auto 2rem;
            text-align: center;
            color: #6c757d;
        }
        
        .features-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .feature-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
        }
        
        .feature-header {
            background-color: #0066cc;
            color: white;
            padding: 1rem;
            font-size: 1.2rem;
            font-weight: bold;
        }
        
        .feature-content {
            padding: 1.5rem;
        }
        
        .demo-area {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background-color: #f1f3f5;
            border-radius: 4px;
            min-height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        .code-block {
            background-color: #282c34;
            color: #abb2bf;
            padding: 1rem;
            border-radius: 4px;
            overflow-x: auto;
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
            font-size: 0.9rem;
            white-space: pre;
        }
        
        .code-comment {
            color: #7f848e;
        }
        
        .code-property {
            color: #e06c75;
        }
        
        .code-value {
            color: #98c379;
        }
        
        .code-selector {
            color: #61afef;
        }
        
        .code-punctuation {
            color: #c678dd;
        }
        
        footer {
            text-align: center;
            margin-top: 3rem;
            padding-top: 1rem;
            border-top: 1px solid #e9ecef;
            color: #6c757d;
        }
        
        /* 特性1: accent-color */
        .accent-color-demo input[type="checkbox"],
        .accent-color-demo input[type="radio"] {
            accent-color: hotpink;
            transform: scale(1.5);
            margin: 0.5rem;
        }
        
        /* 特性2: caret-color */
        .caret-color-demo input {
            caret-color: limegreen;
            padding: 0.5rem;
            border: 1px solid #ced4da;
            border-radius: 4px;
            width: 100%;
            font-size: 1rem;
        }
        
        /* 特性3: currentColor */
        .current-color-demo button {
            color: #007bff;
            border: 2px solid currentColor;
            background-color: transparent;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }
        
        .current-color-demo button:hover {
            color: #0056b3;
        }
        
        /* 特性4: ::marker */
        .marker-demo ul {
            list-style-type: disc;
            padding-left: 1.5rem;
        }
        
        .marker-demo li::marker {
            color: crimson;
            font-size: 1.2rem;
        }
        
        /* 特性5: :user-valid */
        .user-valid-demo input {
            padding: 0.5rem;
            border: 1px solid #ced4da;
            border-radius: 4px;
            width: 100%;
            font-size: 1rem;
            margin-bottom: 0.5rem;
        }
        
        .user-valid-demo input:user-valid {
            border-color: green;
        }
        
        .user-valid-demo input:user-invalid {
            border-color: red;
        }
        
        /* 特性6: :placeholder-shown */
        .placeholder-shown-demo {
            position: relative;
        }
        
        .placeholder-shown-demo input {
            padding: 0.5rem;
            border: 1px solid #ced4da;
            border-radius: 4px;
            width: 100%;
            font-size: 1rem;
        }
        
        .placeholder-shown-demo label {
            position: absolute;
            left: 0.5rem;
            top: 0.5rem;
            color: #6c757d;
            transition: all 0.3s ease;
            pointer-events: none;
        }
        
        .placeholder-shown-demo input:not(:placeholder-shown) + label,
        .placeholder-shown-demo input:focus + label {
            transform: translateY(-1.5rem);
            font-size: 0.8rem;
            color: #0066cc;
        }
        
        .placeholder-shown-demo input:placeholder-shown + label {
            transform: translateY(0);
            font-size: 1rem;
        }
        
        /* 特性7: all: unset */
        .all-unset-demo .default-button {
            padding: 0.5rem 1rem;
            background-color: #f8f9fa;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 1rem;
            margin-right: 1rem;
        }
        
        .all-unset-demo .reset-button {
            all: unset;
            /* 添加自定义样式 */
            padding: 0.5rem 1rem;
            background-color: #e9ecef;
            border-radius: 4px;
            cursor: pointer;
        }
        
        /* 特性8: inset */
        .inset-demo {
            position: relative;
            height: 150px;
            border: 1px solid #ced4da;
            border-radius: 4px;
        }
        
        .inset-demo .box {
            position: absolute;
            background-color: rgba(0, 102, 204, 0.3);
            border: 2px solid #0066cc;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0066cc;
            font-weight: bold;
        }
        
        .inset-demo .box1 {
            top: 10px;
            right: 10px;
            bottom: 90px;
            left: 10px;
        }
        
        .inset-demo .box2 {
            inset: 90px 10px 10px 10px;
        }
        
        /* 特性9: text-wrap: balance */
        .text-wrap-demo .normal-wrap {
            width: 200px;
            margin-bottom: 1rem;
            padding: 0.5rem;
            background-color: rgba(255, 193, 7, 0.2);
            border: 1px solid #ffc107;
            border-radius: 4px;
        }
        
        .text-wrap-demo .balanced-wrap {
            width: 200px;
            text-wrap: balance;
            padding: 0.5rem;
            background-color: rgba(40, 167, 69, 0.2);
            border: 1px solid #28a745;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <header>
        <h1>9个被低估的CSS特性演示</h1>
    </header>
    
    <div class="intro">
        <p>这个页面展示了9个可能被低估但非常强大的CSS特性，帮助你更高效地进行前端开发。</p>
    </div>
    
    <div class="features-container">
        <!-- 特性1: accent-color -->
        <div class="feature-card">
            <div class="feature-header">1. accent-color: 表单元素的样式魔法</div>
            <div class="feature-content">
                <div class="demo-area accent-color-demo">
                    <div>
                        <input type="checkbox" id="checkbox1" checked>
                        <label for="checkbox1">彩色复选框</label>
                    </div>
                    <div>
                        <input type="radio" id="radio1" name="radio-group" checked>
                        <label for="radio1">彩色单选按钮</label>
                    </div>
                </div>
                <div class="code-block">
<span class="code-selector">input[type="checkbox"]</span><span class="code-punctuation">,</span>
<span class="code-selector">input[type="radio"]</span> <span class="code-punctuation">{</span>
    <span class="code-property">accent-color</span><span class="code-punctuation">:</span> <span class="code-value">hotpink</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span></div>
                <p style="margin-top: 1rem;">只需一行代码，就能给表单元素添加自定义颜色，简单高效！</p>
            </div>
        </div>
        
        <!-- 特性2: caret-color -->
        <div class="feature-card">
            <div class="feature-header">2. caret-color: 光标颜色随心定</div>
            <div class="feature-content">
                <div class="demo-area caret-color-demo">
                    <input type="text" placeholder="在这里输入文字，看看光标颜色">
                </div>
                <div class="code-block">
<span class="code-selector">input</span> <span class="code-punctuation">{</span>
    <span class="code-property">caret-color</span><span class="code-punctuation">:</span> <span class="code-value">limegreen</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span></div>
                <p style="margin-top: 1rem;">为输入框光标添加自定义颜色，提升用户体验的小细节。</p>
            </div>
        </div>
        
        <!-- 特性3: currentColor -->
        <div class="feature-card">
            <div class="feature-header">3. currentColor: 颜色继承的终极利器</div>
            <div class="feature-content">
                <div class="demo-area current-color-demo">
                    <button>悬停查看效果</button>
                </div>
                <div class="code-block">
<span class="code-selector">button</span> <span class="code-punctuation">{</span>
    <span class="code-property">color</span><span class="code-punctuation">:</span> <span class="code-value">#007bff</span><span class="code-punctuation">;</span>
    <span class="code-property">border</span><span class="code-punctuation">:</span> <span class="code-value">2px solid currentColor</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span>

<span class="code-selector">button:hover</span> <span class="code-punctuation">{</span>
    <span class="code-property">color</span><span class="code-punctuation">:</span> <span class="code-value">#0056b3</span><span class="code-punctuation">;</span>
    <span class="code-comment">/* border-color 会自动跟随 color 变化 */</span>
<span class="code-punctuation">}</span></div>
                <p style="margin-top: 1rem;">使用 currentColor 关键字，让边框颜色自动跟随文字颜色，遵循 DRY 原则！</p>
            </div>
        </div>
        
        <!-- 特性4: ::marker -->
        <div class="feature-card">
            <div class="feature-header">4. ::marker: 列表符号的定制革命</div>
            <div class="feature-content">
                <div class="demo-area marker-demo">
                    <ul>
                        <li>自定义列表符号颜色</li>
                        <li>不需要使用图片或其他技巧</li>
                        <li>直接通过 CSS 控制</li>
                    </ul>
                </div>
                <div class="code-block">
<span class="code-selector">li::marker</span> <span class="code-punctuation">{</span>
    <span class="code-property">color</span><span class="code-punctuation">:</span> <span class="code-value">crimson</span><span class="code-punctuation">;</span>
    <span class="code-property">font-size</span><span class="code-punctuation">:</span> <span class="code-value">1.2rem</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span></div>
                <p style="margin-top: 1rem;">轻松定制列表符号的样式，不再需要使用背景图片等复杂技巧。</p>
            </div>
        </div>
        
        <!-- 特性5: :user-valid -->
        <div class="feature-card">
            <div class="feature-header">5. :user-valid: 更人性化的表单验证</div>
            <div class="feature-content">
                <div class="demo-area user-valid-demo">
                    <input type="email" placeholder="输入邮箱地址（符合格式后边框变绿）" required>
                    <small>提示：与:valid不同，:user-valid仅在用户交互后才触发验证</small>
                </div>
                <div class="code-block">
<span class="code-selector">input:user-valid</span> <span class="code-punctuation">{</span>
    <span class="code-property">border-color</span><span class="code-punctuation">:</span> <span class="code-value">green</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span>

<span class="code-selector">input:user-invalid</span> <span class="code-punctuation">{</span>
    <span class="code-property">border-color</span><span class="code-punctuation">:</span> <span class="code-value">red</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span></div>
                <p style="margin-top: 1rem;">避免页面初始加载就显示错误提示，只有在用户实际交互后才触发验证反馈。</p>
            </div>
        </div>
        
        <!-- 特性6: :placeholder-shown -->
        <div class="feature-card">
            <div class="feature-header">6. :placeholder-shown: 智能标签控制</div>
            <div class="feature-content">
                <div class="demo-area placeholder-shown-demo">
                    <input type="text" id="floatingInput" placeholder=" ">
                    <label for="floatingInput">输入文字看标签动画</label>
                </div>
                <div class="code-block">
<span class="code-selector">.placeholder-shown-demo</span> <span class="code-punctuation">{</span>
    <span class="code-property">position</span><span class="code-punctuation">:</span> <span class="code-value">relative</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span>

<span class="code-selector">.placeholder-shown-demo input:not(:placeholder-shown) + label</span> <span class="code-punctuation">{</span>
    <span class="code-property">transform</span><span class="code-punctuation">:</span> <span class="code-value">translateY(-1.5rem)</span><span class="code-punctuation">;</span>
    <span class="code-property">font-size</span><span class="code-punctuation">:</span> <span class="code-value">0.8rem</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span></div>
                <p style="margin-top: 1rem;">精确检测输入框是否为空，创造流畅的浮动标签效果，无需JavaScript。</p>
            </div>
        </div>
        
        <!-- 特性7: all: unset -->
        <div class="feature-card">
            <div class="feature-header">7. all: unset: 组件样式的「一键清零」</div>
            <div class="feature-content">
                <div class="demo-area all-unset-demo">
                    <button class="default-button">默认按钮</button>
                    <button class="reset-button">重置样式按钮</button>
                </div>
                <div class="code-block">
<span class="code-selector">.reset-button</span> <span class="code-punctuation">{</span>
    <span class="code-property">all</span><span class="code-punctuation">:</span> <span class="code-value">unset</span><span class="code-punctuation">;</span>
    <span class="code-comment">/* 添加自定义样式 */</span>
    <span class="code-property">padding</span><span class="code-punctuation">:</span> <span class="code-value">0.5rem 1rem</span><span class="code-punctuation">;</span>
    <span class="code-property">background-color</span><span class="code-punctuation">:</span> <span class="code-value">#e9ecef</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span></div>
                <p style="margin-top: 1rem;">一行代码彻底移除所有默认样式，让组件开发更加灵活自由。</p>
            </div>
        </div>
        
        <!-- 特性8: inset -->
        <div class="feature-card">
            <div class="feature-header">8. inset: 布局语法的终极简化</div>
            <div class="feature-content">
                <div class="demo-area inset-demo">
                    <div class="box box1">top/right/bottom/left 写法</div>
                    <div class="box box2">inset 简写语法</div>
                </div>
                <div class="code-block">
<span class="code-comment">/* 传统写法 */</span>
<span class="code-selector">.box1</span> <span class="code-punctuation">{</span>
    <span class="code-property">top</span><span class="code-punctuation">:</span> <span class="code-value">10px</span><span class="code-punctuation">;</span>
    <span class="code-property">right</span><span class="code-punctuation">:</span> <span class="code-value">10px</span><span class="code-punctuation">;</span>
    <span class="code-property">bottom</span><span class="code-punctuation">:</span> <span class="code-value">90px</span><span class="code-punctuation">;</span>
    <span class="code-property">left</span><span class="code-punctuation">:</span> <span class="code-value">10px</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span>

<span class="code-comment">/* 简写语法 */</span>
<span class="code-selector">.box2</span> <span class="code-punctuation">{</span>
    <span class="code-property">inset</span><span class="code-punctuation">:</span> <span class="code-value">90px 10px 10px 10px</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span></div>
                <p style="margin-top: 1rem;">使用inset简写语法，大幅简化绝对定位和固定布局的代码量。</p>
            </div>
        </div>
        
        <!-- 特性9: text-wrap: balance -->
        <div class="feature-card">
            <div class="feature-header">9. text-wrap: balance: 文本折行的「智能管理」</div>
            <div class="feature-content">
                <div class="demo-area text-wrap-demo">
                    <div class="normal-wrap">
                        <h4>常规换行：</h4>
                        <p>这是一段可能会出现不均匀换行的长文本，看看普通换行的效果如何</p>
                    </div>
                    <div class="balanced-wrap">
                        <h4>平衡换行：</h4>
                        <p>这是一段使用text-wrap: balance的长文本，注意观察各行长度更加均衡</p>
                    </div>
                </div>
                <div class="code-block">
<span class="code-selector">.balanced-wrap</span> <span class="code-punctuation">{</span>
    <span class="code-property">text-wrap</span><span class="code-punctuation">:</span> <span class="code-value">balance</span><span class="code-punctuation">;</span>
<span class="code-punctuation">}</span></div>
                <p style="margin-top: 1rem;">让文本的行长更加均衡，特别适合标题等重要文本，提升排版质量。</p>
                <p style="font-size: 0.8rem; color: #6c757d;">注：Chrome 115+支持，部分浏览器可能尚未支持此特性。</p>
            </div>
        </div>
    </div>
    
    <footer>
        <p>这些CSS特性大多已获得主流浏览器支持，可以放心在项目中使用！</p>
        <p>了解更多前端开发技巧，可访问掘金网站：<a href="https://juejin.cn" style="color: #0066cc; text-decoration: none;">juejin.cn</a></p>
        <p style="margin-top: 0.5rem; font-size: 0.9rem;">© 2025 CSS特性演示 | 基于<a href="https://juejin.cn/post/7504572792357584935" style="color: #0066cc; text-decoration: none;">9个被低估的CSS特性</a>文章</p>
    </footer>
</body>
</html>
